<template>
  <div class="recommended-card">
    <div class="course-card-list">
      <div
        class="course-card"
        v-for="(item, index) in courseRecommended"
        :key="index"
        :style="styleHandle(index)"
        @click="handleTo(item.isCharge, item.payStatus, item.id)"
      >
        <div class="course-face" :style="`background-image:url(${item.coverPath})`"></div>
        <div class="information">
          <span class="introduce">{{ item.seriesName }}</span>
        </div>
        <div class="teacher-and-price">
          <div class="teacher-face">
            <img :src="item.expertFace" />
            <span>{{ item.expertName }}</span>
          </div>
          <span v-if="item.isCharge == 1">
            <span class="price-yellow" v-if="item.payStatus == 'PAID'">已购买</span>
            <span class="price-red" v-else
              ><span>￥</span>{{ item.price.toFixed(2) }}</span
            >
          </span>
          <span v-else class="price-green">免费</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: ["courseRecommended"],
  methods: {
    styleHandle(index) {
      const top = "margin-top:calc(38 / 1920 * 100vw);";
      const left = "margin-left:calc(58 / 1920 * 100vw);";
      if (index % 4 != 0 && index > 3) {
        return left + top;
      } else if (index > 3) {
        return top;
      } else if (index % 4 != 0) {
        return left;
      }
    },
    handleTo(isCharge, payStatus, id) {
      console.log(isCharge, payStatus, id);
      this.$router.push({
        path: "/null",
        query: {
          isCharge: isCharge,
          payStatus: payStatus,
          id: id,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.recommended-card {
  padding-bottom: calc(30 / 1920 * 100vw);
  .course-card-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(26 / 1920 * 100vw);
    .course-card {
      width: calc(296 / 1920 * 100vw);
      box-shadow: calc(4 / 1920 * 100vw) 0px calc(10 / 1920 * 100vw) #efeded;
      padding-bottom: calc(18 / 1920 * 100vw);
      border-radius: calc(5 / 1920 * 100vw);
      overflow: hidden;
      .course-face {
        width: calc(296 / 1920 * 100vw);
        height: calc(170 / 1920 * 100vw);
        background: rgb(236, 236, 236);
        background-size: cover;
      }
      .information {
        padding: 0px calc(10 / 1920 * 100vw);
        display: flex;
        flex-direction: column;
        .introduce {
          display: block;
          line-height: calc(22 / 1920 * 100vw);
          margin-top: calc(12 / 1920 * 100vw);
          font-size: calc(14 / 1920 * 100vw);
        }
        .price {
          margin-left: auto;
          display: block;
          font-size: calc(18 / 1920 * 100vw);
          color: #f4333c !important;
          margin-top: calc(14 / 1920 * 100vw);
          > span {
            font-size: calc(12 / 1920 * 100vw);
          }
        }
      }
      .teacher-and-price {
        padding: 0px calc(10 / 1920 * 100vw);
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: calc(14 / 1920 * 100vw);
        .teacher-face {
          display: flex;
          align-items: center;
          > img {
            width: calc(24 / 1920 * 100vw);
            height: calc(24 / 1920 * 100vw);
            border-radius: calc(12 / 1920 * 100vw);
          }
          > span {
            font-size: calc(12 / 1920 * 100vw);
            color: #63676e;
            margin-left: calc(6 / 1920 * 100vw);
          }
        }
        .price-green {
          color: #0bd7d7;
          display: block;
          padding: calc(4 / 1920 * 100vw) calc(10 / 1920 * 100vw);
          border-radius: calc(3 / 1920 * 100vw);
          background: #dbf9f9;
          font-size: 12px;
          text-align: center;
          line-height: calc(18 / 1920 * 100vw);
        }
        .price-yellow {
          color: #ff900d;
          display: block;
          padding: calc(4 / 1920 * 100vw) calc(10 / 1920 * 100vw);
          border-radius: calc(3 / 1920 * 100vw);
          background: #ffeedb;
          font-size: 12px;
          text-align: center;
          line-height: calc(18 / 1920 * 100vw);
        }
        .price-red {
          margin-left: auto;
          display: block;
          font-size: calc(18 / 1920 * 100vw);
          color: #f4333c !important;
          > span {
            font-size: calc(12 / 1920 * 100vw);
          }
        }
      }
    }
  }
}
</style>
